<template>
	<view>
		<view style="padding: 10px">我的客户数：{{ customers.length || 0 }}</view>

		<uni-list v-if="customers?.length > 0">
<!-- 			<view v-if="customers?.length > 0">
				<uni-list-item v-for="(item, index) in customers" :key="index"
					:title="(item.ciName || '') + (item.ciAlia ? '(' + item.ciAlia + ')' : '') + (item.ciPhon || '')"
					:rightText="item.ciFrom === '新客' ? '新客' : '老客'" :thumb="item.ciAvat" link="navigateTo"
					:to="'/pages/staff/customer_browse?ciUuid=' + item.ciUuid" />
			</view> -->
            <uni-list-item v-for="(item, index) in customers" :key="index" direction="column">
              <template v-slot:header>
                    <view style="display: flex; justify-content: space-between;">
                        <view>{{ (item.ciName || '') + (item.ciAlia ? '(' + item.ciAlia + ')' : '') + (item.ciPhon || '') }}</view>
                        <view>{{item.ciFrom === '新客' ? '新客' : '老客'}}</view>
                    </view>
                </template>

               <template v-slot:footer>
                    <view style="display: flex; margin-top: 15px; margin-bottom: 5px; justify-content: space-between;">
                        <view></view>
                        <view style="display: flex;">
                            <u-button plain hairline size="small" type="primary" text="浏览记录" style="margin-right: 10px;" @click="gotoToBrowse(item)"></u-button>
                            <u-button plain hairline size="small" type="primary" text="分享预约" style="margin-right: 10px;" @click="gotoToAppointment(item)"></u-button>
                            <u-button plain hairline size="small" type="primary" text="裂变订单" style="margin-right: 10px;" @click="gotoToFissionOrder(item)"></u-button>
                            <u-button plain hairline size="small" type="primary" text="裂变客户" @click="gotoToFissionCustomer(item)"></u-button>
                        </view>
                    </view>
                </template>
            </uni-list-item>
            <u-empty v-if="customers.length === 0" text="暂无数据"> </u-empty>
		</uni-list>
	</view>
</template>

<script>
	import {
		getMyCustomerInfo
	} from "../../utils/api";
	import {
		mapGetters
	} from "vuex";

	export default {
		data() {
			return {
				customers: [],
			};
		},
		onLoad() {
			this.loadCustomers(this.staffInfo.orUuid, this.activity.gpUuid);
		},
		computed: {
			...mapGetters({
				staffInfo: "personInfo/staffInfo",
				activity: "activityInfo/activity",
			}),
		},

		methods: {
			async loadCustomers(orUuid, gpUuid) {
				let res = await getMyCustomerInfo({
					orUuid,
					gpUuid
				});
				this.customers = res || [];
			},
            
            gotoToBrowse(item) {
                uni.navigateTo({
                    url: `/pages/staff/customer_browse?ciUuid=${item.ciUuid}`
                })
            },
            gotoToAppointment(item) {
                uni.navigateTo({
                    url: `/pages/staff/customer_share_appointment?ciUuid=${item.ciUuid}`
                })
            },
            gotoToFissionOrder(item) {
                uni.navigateTo({
                    url: `/pages/staff/customer_fission_order?ciUuid=${item.ciUuid}`
                })
            },
            gotoToFissionCustomer(item) {
                uni.navigateTo({
                    url: `/pages/staff/customer_fission_customer?ciUuid=${item.ciUuid}`
                })
            },
		},
	};
</script>

<style lang="scss" scoped></style>
